@darkening-factor: 15%;
@box-shadow-bottom: inset 0 -1px 0 0 hsla(0,0%,0%, 0.3);

.mixin-btn(@color) {
  background-color: @color;
  border-radius: @component-border-radius-small;
  font-size: 12px;
  border: none;
  color: @button-text-color-inverted;
  box-shadow: @box-shadow-bottom;

  &:hover {
    background-color: @color;
  }

  &:active,
  &:focus {
    outline: none !important;
    box-shadow: @box-shadow-bottom !important;
  }

  &.icon:hover {
    color: @text-color-selected;
  }
}

.mixin-btn-colored--active-focus-selected(@color) {
  &:active,
  &:focus,
  &.selected {
    background: linear-gradient(to top, shade(@color, 15%), @color);
    color: hsla(0,0%,100%, 0.75);
  }
}

@darkening-factor-selected-default: 50%;
